<%@ page language="java" 
contentType="text/html; charset=UTF-8"
%>
<%@ page import="com.google.appengine.api.users.User" %>
<%@ page import="com.google.appengine.api.users.UserService" %>
<%@ page import="com.google.appengine.api.users.UserServiceFactory" %>
<%@ page import="com.google.appengine.api.blobstore.BlobstoreServiceFactory" %>
<%@ page import="com.google.appengine.api.blobstore.BlobstoreService" %>
<%@ page import="java.net.URLDecoder" %>
<%@ page import="plotagem.Utilidades" %>

<%
    BlobstoreService blobstoreService = BlobstoreServiceFactory.getBlobstoreService();
%>

<html>
<%
    UserService userService = UserServiceFactory.getUserService();
    User user = userService.getCurrentUser();
    if (user != null) {
    String tabelaArquivos = Utilidades.TabelaArquivos(user.toString());
    String titulos=(String) request.getAttribute("titulos");
    String titulosErros=(String) request.getAttribute("titulosErros");
    int nTitulos = 3;
    String sortingGrid = "str";
    String ArrTitulos = "";
    if(titulos!=null){
    	String listaTitulos[]=titulos.split(",");
    	
    	nTitulos= titulos.split(",").length;
    	ArrTitulos = "\"" + listaTitulos[0] + "\"";
    	   for(int i=1;i<nTitulos;i++){
    			sortingGrid = sortingGrid + ",str";
    			ArrTitulos = ArrTitulos + ",\""+listaTitulos[i]+"\"";
    	}
    }
    Utilidades.registraVisita();
	long visita = Utilidades.nrGeral();
%>

<head>

<title>Plotagem</title>
	<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyAfVQZjNgZgQvkwe9w2cS8VxRlOgUkkJwQ&sensor=false"></script>
	<script type="text/javascript" src="/javascript/scripts.js"></script>
	<link rel="stylesheet" type="text/css" href="/dhtmlxLayout/codebase/dhtmlxlayout.css">
	<link rel="stylesheet" type="text/css" href="/dhtmlxLayout/codebase/skins/dhtmlxlayout_dhx_skyblue.css">
	<script src="/dhtmlxLayout/codebase/dhtmlxcommon.js"></script>
	<script src="/dhtmlxLayout/codebase/dhtmlxlayout.js"></script>
	<script src="/dhtmlxLayout/codebase/dhtmlxcontainer.js"></script>
	<script src="/dhtmlxLayout/codebase/patterns/dhtmlxlayout_pattern4c.js"></script>
	<link rel="stylesheet" type="text/css" href="/css/geral.css">
	<script type="text/javascript">

	var titulos = [<%= ArrTitulos %>];
	var marcadores = [];
    var latlng = new google.maps.LatLng(-15.801, -47.878);
    var myOptions = {
    		zoom: 6,
    		center: latlng,
    		mapTypeId: google.maps.MapTypeId.ROADMAP
    	};
    var html = [];
    function initialize() {
    	map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
/*Aqui pode ser feita a personalização dos marcadores, mas isso pode acarretar lentidão na página*/
    	var param_iconType = "green";
    	var param_iconOverType = "orange";
    	var iconSize = new google.maps.Size(20, 34);
		var iconShadowSize = new google.maps.Size(37, 34);
		var iconHotSpotOffset = new google.maps.Point(9, 0); // Should this be (9, 34)?
		var iconPosition = new google.maps.Point(0, 0);
		var infoWindowAnchor = new google.maps.Point(9, 2);
		var infoShadowAnchor = new google.maps.Point(18, 25);
		var iconShadowUrl = "http://www.google.com/mapfiles/shadow50.png";
		var iconImageUrl;
		var iconImageOverUrl;
		var iconImageOutUrl;
    	iconImageOutUrl = "http://gmaps-samples.googlecode.com/svn/trunk/" + "markers/" + param_iconType + "/blank.png";
    	iconImageOverUrl = "http://gmaps-samples.googlecode.com/svn/trunk/" + "markers/" + param_iconOverType + "/blank.png";
    	iconImageUrl = iconImageOutUrl;
    	var markerShadow = new google.maps.MarkerImage(iconShadowUrl, iconShadowSize, iconPosition, iconHotSpotOffset);
		var markerImage = new google.maps.MarkerImage(iconImageUrl, iconSize, iconPosition, iconHotSpotOffset);
		var markerImageOver = new google.maps.MarkerImage(iconImageOverUrl, iconSize, iconPosition, iconHotSpotOffset);
		var markerImageOut = new google.maps.MarkerImage(iconImageOutUrl, iconSize, iconPosition, iconHotSpotOffset);
		for(i=0;i<enderecosEncontrados.rows.length;i++){
    		marcadores[i] = new google.maps.Marker({
    			title: enderecosEncontrados.rows[i].data[0],
    			icon: markerImage,
    			shadow: markerShadow,
        		position: new google.maps.LatLng(enderecosEncontrados.rows[i].data[<%=(nTitulos-3)%>], enderecosEncontrados.rows[i].data[<%=(nTitulos-2) %>]),
        		map: map,
        		draggable : true
    		});
    		html[i] = "<html><head><link rel='stylesheet' type='text/css' href='/css/geral.css'></head><body><h5>" + enderecosEncontrados.rows[i].data[0] + "</h5>" +
			"<table class='TabPlace'><th class='colPlaceNome'>Nome</th><th class='colPlaceValor'>Valor</th></tr>";
			for(n=1;n < <%=nTitulos%>; n++){
				html[i] = html[i] + "<tr><td class='tdPlaceNome'>" + titulos[n] + "</td><td class='tdPlaceValor'>" + enderecosEncontrados.rows[i].data[n] + "</td></tr>";
			}
			html[i] = html[i] + "</table></body></html>";

     		new google.maps.event.addListener(marcadores[i], 'click', function onMarkerClick() {
      			var marker = this;
      			var indice = marcadores.indexOf(marker);
      			var latLng = marker.getPosition();
      			var title = marker.getTitle();
      			infoWindow.setContent(html[indice]);
      			infoWindow.open(map, marker);
      			mygrid.selectRowById(indice+1);
    		});
     		new google.maps.event.addListener(marcadores[i], 'dragend', function onMarkerClick() {
      			var marker = this;
      			var indice = marcadores.indexOf(marker);
      			var latLng = marker.getPosition();
      			enderecosEncontrados.rows[indice].data[<%=nTitulos-3%>] = latLng.lat();
      			enderecosEncontrados.rows[indice].data[<%=(nTitulos-2)%>] = latLng.lng(); 
/*Recria o grid com as novas coordenadas*/     			
      			mygrid.clearAll();
      			mygrid.parse(enderecosEncontrados,"json");
/*Recria o html com as novas coordenadas*/
				html[indice] = "<html><head><link rel='stylesheet' type='text/css' href='/css/geral.css'></head><body><h5>" + enderecosEncontrados.rows[indice].data[0] + "</h5>" +
				"<table class='TabPlace'><th class='colPlaceNome'>Nome</th><th class='colPlaceValor'>Valor</th></tr>";
				for(n=1;n < <%=nTitulos%>; n++){
					html[indice] = html[indice] + "<tr><td class='tdPlaceNome'>" + titulos[n] + "</td><td class='tdPlaceValor'>" + enderecosEncontrados.rows[indice].data[n] + "</td></tr>";
				}
				html[indice] = html[indice] + "</table></body></html>";
				infoWindow.setContent(html[indice]);
      			mygrid.selectRowById(indice+1);
    		});
    	}
    	new google.maps.event.addListener(map, 'click', function() {
      		infoWindow.close();
    	});
     }
    </script>
</head>

<body onload="doOnLoad()" id='body'>
	<div id="div_principal"></div>
	<div id="div_inferior">
		<p class="rodape">Desenvolvido por André Luis Soares de Matos como requisito para conclusão do Curso de Especialização em Desenvolvimento de Sistemas em Software Livre pela Universidade Católica de Brasília.</p>
	</div>
	<div id="div_mapa">
		<div id="map_canvas"></div>
	</div>
	<div id="div_lateral">
		Usuário: <%= user.getNickname() %><br/>
		<a href="<%= userService.createLogoutURL(request.getRequestURI()) %>"> sair</a><br/>
		<div>
			<form name="enviar" action="<%= blobstoreService.createUploadUrl("/upload") %>" method="post" enctype="multipart/form-data">
				<table border="0" >
				<tr><td><input type="file" name="arquivo"></td></tr>
				<input type="hidden" name="salvar" value="<%String chave=(String) request.getAttribute("chave");if(chave != null)out.print(chave);%>"/>
				<input type="hidden" name="enderecosEncontrados" value=""/>
				<tr><td><input type="submit" value="Enviar"></td></tr>
				</table>
			</form>
		</div><br />
		<div>
			1) As tabulações indicam a separação entre as colunas. Não deve haver tabulações no texto dos campos;<br />
			2) A primeira coluna deve conter os títulos para os marcadores que serão construídos, por exemplo, UCB-Virtual;<br />
			3) A segunda coluna deve conter as descrições desses marcadores, por exemplo, Universidade Católica de Brasília - Virtual;<br />
			4) A terceira coluna deve conter os endereços completos, que serão usados para posicionar os marcadores, através do Google Maps, por exemplo, QS 07, Lote 01, EPCT, Águas Claras – Taguatinga	Bloco M, Sala 116;<br />
			5) Os dados das demais colunas são de livre escolha;<br />
			6) A primeira linha deve conter os títulos das colunas;<br />
			7) A codificação do texto deve ser "UTF-8" e serão lidas, no máximo, 600 linhas e 100 Kb.
			<br />
			Exemplo:
			<p><a href="/pedido?blob-key=AMIfv97oRpBts33iaMFOnRRrJbyVyjV6WUmJurfdbx7nRIVaA0Ubur3-efuT2oG_WMdUkW11YgTx19Gs_btWpCZ_EEshByZUE2ZQ811GWOcrW4hHCKRN-UMKepZHV317up2KVqAJTkCxAwlJ3n1lFl1ieXUN6kiQkkqKY8OD5acFv2spbat8eWE">Arquivo Universidades.txt</a></p>
		</div><br />
		<div>
			<% if(tabelaArquivos != null)out.println(tabelaArquivos); %>	
		</div>	
	</div>
	<div id="div_tabela" >
		<center>
<!--Botão que carregar as novas coordenadas e apaga um arquivo eventualmente carregado no form-->
			<tr><td><input type="submit" onclick="gravardados()" name="salvar" value="Salvar alterações"/></td></tr>

			<link rel="STYLESHEET" type="text/css" href="/dhtmlxGrid/codebase/dhtmlxgrid.css">
			<link rel="stylesheet" type="text/css" href="/dhtmlxGrid/codebase/skins/dhtmlxgrid_dhx_skyblue.css">
			<script  src="/dhtmlxGrid/codebase/dhtmlxcommon.js"></script>
			<script  src="/dhtmlxGrid/codebase/dhtmlxgrid.js"></script>        
			<script  src="/dhtmlxGrid/codebase/dhtmlxgridcell.js"></script> 
			<div id="gridbox" style="width:<%=(nTitulos*200)%>px; height:270px; background-color:white;"></div>
			<br>    

	<script>
		function gravardados(){
			document.enviar.enderecosEncontrados.value = JSON.stringify(enderecosEncontrados);
			document.enviar.arquivo = "";
			document.enviar.submit();
		}
		var enderecosEncontrados={rows:[<%String enderecosEncontrados=(String) request.getAttribute("enderecosEncontrados");if(enderecosEncontrados != null)out.println(enderecosEncontrados);%>]}
    	function doOnRowSelected(id) {
    		infoWindow.close();
			var indice = id-1;
    		var marker = marcadores[indice];
    		var latLng = marker.getPosition();
      		var title = marker.getTitle();
      		infoWindow.setContent(html[id-1]);
      		infoWindow.open(map, marker);
		}
		mygrid = new dhtmlXGridObject('gridbox');
		mygrid.setImagePath("/dhtmlxGrid/codebase/imgs/");
		mygrid.setHeader("<% if(titulos != null)out.print(titulos);%>");
		mygrid.setColSorting("<%=sortingGrid%>");
		mygrid.init();
		mygrid.setSkin("dhx_skyblue");
		mygrid.parse(enderecosEncontrados,"json");
		mygrid.attachEvent("onRowSelect", doOnRowSelected);
	</script>
		</center>
	</div>
	<div id="div_erros">
	<br />
		<center>
			<div id="gridboxErros" style="width:<%if(nTitulos>3){out.print((nTitulos-3)*200);}else{out.print(600);}%>px; height:270px; background-color:white;"></div>
			<br>    
	<script>
		dadosErros = {rows:[<%String enderecosErros=(String) request.getAttribute("enderecosErros");if(enderecosErros != null)out.println(enderecosErros);%>]}
		mygridErros = new dhtmlXGridObject('gridboxErros');
		mygridErros.setImagePath("/dhtmlxGrid/codebase/imgs/");
		mygridErros.setHeader("<% if(titulosErros != null)out.print(titulosErros);%>");
		mygrid.setColSorting("<%=sortingGrid%>");
		mygridErros.init();
		mygridErros.setSkin("dhx_skyblue");
		mygridErros.parse(dadosErros,"json");
	</script>
		</center>
	</div>	
<%
    } else {
%>
<head>
<title>Plotagem-Autenticação</title>
</head>
<body>
<p>Para usar a plotagem é necessária a autenticação do usuário, feita pela conta de usuário do Google.</p>
<p>Basta logar em sua conta de usuário do Google para usar esta Aplicação.</p>
<p><a href="<%= userService.createLoginURL(request.getRequestURI()) %>"> Logar</a></p>
<%
    }
%>
</body>
</html>
